<script setup lang="ts">
import { ref } from 'vue';
import { EInput } from 'exploria-ui';

type EyeTrigger = InstanceType<typeof EInput>['eyeTrigger'];
const text = ref('');

const eyeTriggerList: EyeTrigger[] = [
    'click',
    'hover',
    'dblclick',
    'long-press',
];
</script>

<template>
    <div class="using">
        <div class="row" v-for="trigger of eyeTriggerList" :key="trigger">
            {{ trigger }}
            <EInput
                type="password"
                v-model="text"
                placeholder="请输入密码"
                clearable
                :eye-trigger="trigger"
            >
                <template #prefix>
                    <span class="iconfont icon-mima" />
                </template>
            </EInput>

            <EInput
                type="password"
                v-model="text"
                placeholder="请输入密码"
                clearable
                :eye-trigger="trigger"
            >
                <template #prefix>
                    <span class="iconfont icon-mima" />
                </template>
            </EInput>
        </div>
    </div>
</template>
<style scoped lang="scss">
@import 'iconfont/iconfont.css';

.using {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
</style>
